<template>
  <!-- 生命周期：
         创建期
             创建前：beforeCreate:实例化还没有完成，还不能访问data与methods
             创建后:created:实例化已完成，可以访问data与methods，进入页面接口请求
         渲染期
             渲染前：beforeMount:读取了template内容，解析了，但还没有完成渲染
             渲染后：mounted:初次渲染完成，进入页面的dom获取              
          上面四个生命周期都只执行一次
         更新期:可执行多次（vue页面上使用的相关数据已修改）
            更新前：beforeUpdate:vue页面上使用的相关数据已修改，但是还没有完成渲染
            更新后:updated：vue页面上使用的相关数据已修改，且渲染完成
          销毁期
            销毁前：beforeDestroy:什么都可访问，常用于善后工作(清理setInterval,scroll...)
            销毁后:destroyed:中断渲染，还是可以data与methods,但是不可访问vue渲染后的dom 
 -->

  <div>
    <h1>我是子组件</h1>
    <div ref="xxx">{{ num }}</div>
    <button @click="btnClick">修改msg</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: 1,
      abc: 10,
      setInterval: ''
    }
  },
  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    this.setInterval = setInterval(() => {
      console.log('setInterval')
    }, 1000)
    console.log('created', this.$refs.xxx)
  },
  beforeMount () {
    console.log('beforeMount', this.$refs.xxx)
  },
  mounted () {
    console.log('mounted', this.$refs.xxx)
  },
  beforeUpdate () {
    console.log('beforeUpdate', this.$refs.xxx.innerHTML)
  },
  updated () {
    console.log('updated', this.$refs.xxx.innerHTML)
  },
  beforeDestroy () {},
  destroyed () {
    clearInterval(this.setInterval)
  },
  methods: {
    btnClick () {
      this.num++
      //   this.abc++
    }
  }
}
</script>
<style></style>
